<!-- 表单通用分页器 -->
<template>
  <div class="mt-24">
    <a-pagination
      :current="offset"
      :page-size="limit"
      :total="total"
      :page-size-options="pageSizeOptions"
      :show-total="(total:number) => `共${total}条数据`"
      show-size-changer
      @update:pageSize="(val:number) => emits('update:limit', val)"
      @update:current="(val:number) => emits('update:offset', val)"
      @change="emits('change')"
    />
  </div>
</template>

<script setup lang="ts">
  const emits = defineEmits(['update:offset', 'update:limit', 'change'])

  export interface Props {
    offset: number
    limit: number
    total: number
    pageSizeOptions?: string[]
  }

  withDefaults(defineProps<Props>(), {
    offset: 1,
    limit: 10,
    total: 0,
    pageSizeOptions: () => ['10', '20', '50', '100']
  })
</script>
